import React, { useState } from 'react'
import { Input, Select } from 'antd'
import { useHeroCategories } from '@/hooks/heroInfo'
import Star from './Star'
import UpLoad from '@/components/upload/UpLoad'
import { getHerosCategories } from '@/api/hero'
import { connect } from 'umi'

type Props = {
    hero: any,
    dispatch: any
}

const { Option } = Select

function Info({ hero, dispatch }: Props) {
    const { heroCategories } = useHeroCategories(getHerosCategories)
    const { name, title } = hero
    const [val, setVal] = useState("")
    console.log('info')
    function handleChange(val: any) {
        dispatch({ type: "hero/setProps", val, prop: "cate" })
    }
    return (
        <div>
            <div className='banner_flex mt15'>
                <span>
                    英雄名称
                </span>
                <Input value={name} onChange={(ev) => {
                    // setVal(ev.target.value)
                    dispatch({ type: "hero/setProps", val: ev.target.value, prop: "name" })
                }}/>
            </div>
            <div className='banner_flex mt15'>
                <span>
                    英雄称号
                </span>
                <Input value={title} onChange={(ev) => {
                    dispatch({ type: "hero/setProps", val: ev.target.value, prop: "title" })
                }}/>
            </div>
            <div className='banner_flex mt15'>
                <span>
                    英雄定位
                </span>
                <Select
                    mode="multiple"
                    allowClear
                    style={{ width: '100%' }}
                    placeholder="请选择定位"
                    defaultValue={[]}
                    onChange={handleChange}
                >
                    {
                        heroCategories.map((item: any) => {
                            return <Option key={item._id}>
                                {item.name}
                            </Option>
                        })
                    }

                </Select>
            </div>

            <Star title="难度" prop="difficulty"/>
            <Star title="技能" prop="skill"/>
            <Star title="攻击" prop="attack"/>
            <Star title="生存" prop="survive"/>

            <div className='banner_flex mt15'>
                <span>
                    英雄头像
                </span>
                <UpLoad url="/api/upload/hero"  type="hero/setProps" prop="avatar"/>
            </div>

            <div className='banner_flex mt15'>
                <span>
                    背景图片
                </span>
                <UpLoad url="/api/upload/hero"  type="hero/setProps" prop="banner"/>
            </div>

            <div className='banner_flex mt15'>
                <span>
                    图文介绍
                </span>
                <UpLoad url="/api/upload/hero"  type="hero/setProps" prop="photo"/>
            </div>
        </div>
    )
}

const mapStateToProps = (state: any) => {
    const { hero } = state
    return {
        hero
    }
}

export default connect(mapStateToProps)(Info)